import { styled, alpha } from '@mui/material/styles';
import { Paper as MuiPaper, Button as MuiButton } from '@mui/material';

// Define the accent color (used in hover and focus states)
const accentColor = '#00FFF2'; // Cyan color from TreeItem

export const NeumorphicPaper = styled(MuiPaper)(({ 
  theme, 
  darkMode = false, 
  useBackgroundColor = true 
}) => ({
  position: 'relative',
  padding: theme.spacing(3),
  border: darkMode ? '2px solid rgba(0, 255, 242, 0.15)' : '0px solid #ffffff',
  borderRadius: '1.5em',
  transition: 'all 0.3s ease',
  display: 'inline-block',
  //backdropFilter: darkMode ? 'blur(12px)' : 'none',
  
  // Light Mode (Neumorphic)
  ...(!darkMode && {
    background: useBackgroundColor ? 'linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(223, 227, 238, 0.6))' : 'transparent',
    boxShadow: 'inset 1px 1px 3px rgba(223, 227, 238, 0.5), inset -1px -1px 3px rgba(255, 255, 255, 0.8)',
    color: 'rgba(0, 2, 3, 0.9)',
  }),
  
  // Dark Mode (Using TreeItems styling)
  ...(darkMode && {
    background: useBackgroundColor ? 'linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02))' : 'transparent',
    boxShadow: 'inset 1px 1px 2px rgba(0, 0, 0, 0.2), inset -1px -1px 2px rgba(255, 255, 255, 0.05)',
    color: 'rgba(255, 255, 255, 0.9)',
  }),
  
  '&.pressed': {
    // Light Mode Pressed State
    ...(!darkMode && {
      background: useBackgroundColor ? 'linear-gradient(135deg, rgba(223, 227, 238, 0.6), rgba(255, 255, 255, 0.9))' : 'transparent',
      boxShadow: 'inset 2px 2px 5px rgba(223, 227, 238, 0.8), inset -2px -2px 5px rgba(255, 255, 255, 0.9), 0 0 20px rgba(223, 227, 238, 0.4)',
    }),
    
    // Dark Mode Pressed State
    ...(darkMode && {
      background: useBackgroundColor ? 'linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05))' : 'transparent',
      boxShadow: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.05), 0 0 15px rgba(0, 255, 242, 0.1)',
    }),
  }
}));

export const NeumorphicButton = styled(MuiButton)(({ 
  theme, 
  darkMode = false, 
  useBackgroundColor = true 
}) => ({
  position: 'relative',
  cursor: 'pointer',
  padding: darkMode ? theme.spacing(1, 2) : theme.spacing(2, 3),
  border: darkMode ? '1px solid rgba(255, 255, 255, 0.3)' : '0px solid #ffffff',
  borderRadius: darkMode ? '9999px' : '12px', // full rounded in dark mode
  transition: 'all 0.3s ease',
  textTransform: 'none',
  fontWeight: 'bold',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  gap: '0.5em',
  //backdropFilter: darkMode ? 'blur(12px)' : 'none',
  overflow: darkMode ? 'hidden' : 'visible',
  
  // Light Mode (Neumorphic)
  ...(!darkMode && {
    backgroundColor: 'transparent !important',
    background: useBackgroundColor ? 'linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(223, 227, 238, 0.6))' : 'transparent',
    boxShadow: 'inset 1px 1px 3px rgba(223, 227, 238, 0.5), inset -1px -1px 3px rgba(255, 255, 255, 0.8)',
    color: 'rgba(0, 2, 3, 0.9)',
  }),
  
  // Dark Mode (Glassy Button)
  ...(darkMode && {
    backgroundColor: 'transparent !important',
    background: 'transparent',
    boxShadow: 'none',
    color: 'rgba(255, 255, 255, 0.9)',
  }),
  
  '&:hover': {
    // Light Mode Hover
    ...(!darkMode && {
      background: useBackgroundColor ? 'linear-gradient(135deg, rgba(223, 227, 238, 0.6), rgba(255, 255, 255, 0.9))' : 'transparent',
      boxShadow: 'inset 2px 2px 5px rgba(223, 227, 238, 0.8), inset -2px -2px 5px rgba(255, 255, 255, 0.9), 0 0 20px rgba(223, 227, 238, 0.4)',
    }),
    
    // Dark Mode Hover
    ...(darkMode && {
      transform: 'translateY(0.125em)',
      '& .MuiButton-endIcon': {
        transform: 'translateX(10%)',
      }
    }),
    
    '& .MuiButton-label': {
      color: darkMode ? '#fff' : theme.palette.primary.main,
      textShadow: darkMode 
        ? `0 0 8px ${alpha(accentColor, 0.6)}`
        : `0 0 8px ${theme.palette.primary.main}40`,
    },
  },
  
  '&:active': {
    // Light Mode Active
    ...(!darkMode && {
      boxShadow: 'inset 3px 3px 6px rgba(223, 227, 238, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.5)',
    }),
    
    // Dark Mode Active
    ...(darkMode && {
      transform: 'translateY(0.25em)',
    }),
  },
  
  // Custom styling for the arrow icon in dark mode
  '& .MuiButton-endIcon': {
    transition: 'transform 0.3s',
    ...(darkMode && {
      marginLeft: '0.5em',
      '& svg': {
        width: '24px',
        height: '24px',
        stroke: 'currentColor',
        strokeWidth: 1,
        fill: 'white',
      }
    })
  }
}));

// Custom arrow icon component for the dark mode button
export const ArrowIcon = () => (
  <svg
    width="24"
    height="24"
    stroke="currentColor"
    strokeWidth="1"
    viewBox="0 0 24 24"
    fill="white"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
      strokeLinejoin="round"
      strokeLinecap="round"
    />
  </svg>
);

// Usage examples:
// 
// Light Mode:
// <NeumorphicPaper darkMode={false}>
//   <h1>Heading</h1>
//   <p>Light mode content</p>
//   <NeumorphicButton darkMode={false}>Button</NeumorphicButton>
// </NeumorphicPaper>
//
// Dark Mode:
// <NeumorphicPaper darkMode={true}>
//   <h1>Heading</h1>
//   <p>Dark mode content</p>
//   <NeumorphicButton 
//     darkMode={true} 
//     endIcon={<ArrowIcon />}
//   >
//     Button
//   </NeumorphicButton>
// </NeumorphicPaper>